<!--
 * Copyright © 2022 XXXXXXXXX
 * @Author: zhangxiang
 * @Date: 2022-09-14 14:37:24
 * @LastEditors: zhangxiang
 * @LastEditTime: 2022-11-03 10:18:18
 * @Description:
 *
-->

<template>
  <div class="event-trend-warning-ctn">
    <!-- 趋势图 -->
    <div id="trend-warning-line"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { parseTime } from '@/utils/utils'

export default {
  name: 'EventTrendWarning',
  props: {
    // 数据
    trend: {
      type: Array, // 类型
      required: true, // 必须
      default: () => [] // 默认值
    }
  },
  data() {
    return {
      chart: null // 图表
    }
  },
  computed: {
    /**
     *
     * @description: 横坐标数据
     * @return {*}
     *
     */
    xAxisData() {
      const xAxisData = []
      for (const item of this.trend) {
        // 循环
        const date = parseTime(item.timestamp, '{m}/{d} {h}:{i}') // 格式化日期
        xAxisData.push(date)
      }
      return xAxisData
    },
    /**
     *
     * @description: 纵坐标数据
     * @return {*}
     *
     */
    seriesData() {
      const seriesData = []
      for (const item of this.trend) {
        // 循环
        seriesData.push({
          value: Number(item.warning),
          time: parseTime(item.timestamp, '{m}/{d} {h}:{i}') // 格式化日期
        })
      }
      return seriesData
    }
  },
  watch: {
    /**
     *
     * @description: 监听seriesData
     * @return {*}
     *
     */
    seriesData: {
      handler: function(newValue, oldValue) {
        this.$nextTick(() => {
          this.setChartOption() // 设置图表
        })
      },
      deep: true
    }
  },
  mounted() {
    this.initChart() // 初始化
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    /**
     *
     * @description: 设置图表配置
     * @return {*}
     *
     */
    setChartOption() {
      this.chart.setOption({
        color: ['#0091FF'], // 颜色
        tooltip: {
          trigger: 'axis', // 触发
          backgroundColor: '#FFFFFF', // 背景色
          borderColor: '#E8E6F4', // 边框色
          borderWidth: 1, // 边框宽度
          // 自定义提示条
          // 组成
          // 标题
          // 时间 + 数据
          formatter: (params, ticket, callback) => {
            const xAxisLable = '<div>Warning事件趋势</div>'
            let content = ''
            content =
              content +
              '<div style="display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;">' +
              '<span>' +
              params[0].data.time +
              '</span><span style="color:#0091FF;font-weight: bold;">' +
              params[0].data.value +
              '</span></div>'
            return (
              '<div style="box-sizing: border-box;font-size:12px;">' +
              xAxisLable +
              content +
              '</div>'
            )
          }
        },
        grid: {
          left: '10',
          right: '10',
          bottom: '0',
          top: '20',
          containLabel: true
        },
        xAxis: [
          // 横坐标
          {
            type: 'category', // 类型
            boundaryGap: false,
            axisLine: {
              // 线条样式
              show: false // 不显示
            },
            axisTick: {
              // 端点样式
              show: false // 不显示
            },
            axisLabel: {
              // 文本样式
              show: true, // 显示
              color: '#C3C3C3' // 颜色
            },
            data: this.xAxisData // 数据
          }
        ],
        yAxis: [
          // 纵坐标
          {
            type: 'value',
            axisLabel: {
              // 文本样式
              show: true, // 显示
              color: '#C3C3C3' // 颜色
            },
            axisTick: {
              // 端点样式
              show: false // 不显示
            },
            splitLine: {
              // 分割线样式
              show: true, // 显示
              lineStyle: {
                color: '#EAEAEA', // 颜色
                type: 'dashed' // 类型
              }
            }
          }
        ],
        series: [
          {
            name: 'Warning事件趋势', // 名称
            type: 'line', // 类型
            smooth: true, // 光滑
            showSymbol: false, // 显示symbol
            lineStyle: {
              // 线条样式
              width: 2, // 宽度
              color: '#0091FF'// 颜色
            },
            areaStyle: {
              // 区域样式
              opacity: 1,
              // 颜色渐变
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(96, 182, 253, 0.19)'
                },
                {
                  offset: 1,
                  color: 'rgba(87, 226, 250, 0)'
                }
              ])
            },
            data: this.seriesData // 数据
          }
        ]
      })
    },
    /**
     *
     * @description: 初始化图表
     * @return {*}
     *
     */
    initChart() {
      this.chart = echarts.init(document.getElementById('trend-warning-line')) // 初始化
      this.setChartOption() // 设置图表
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.event-trend-warning-ctn {
  #trend-warning-line {
    height: 100%;
  }
}
</style>
